<template>
  <div class="modifyQuotaPass">
    <confirm v-model="show"
             :title="dialogVisibleQuotaPassPay ? '输入额度支付密码' : (isQuotaPass ? '修改额度支付密码' : '设置额度支付密码')"
             :show-cancel-button="false"
             :show-confirm-button="false"
    >
      <!--设置密码框-->
      <template v-if="!dialogVisibleQuotaPassPay">
        <!--<div class="modifyQuotaPass-label">-->
        <!--<span>登陆密码:</span>-->
        <!--<input type="password" placeholder="请输入登录密码" v-model.trim="form.pass_source">-->
        <!--</div>-->
        <div style="font-size: 12px">
          <slot></slot>
        </div>
        <div class="modifyQuotaPass-label">
          <span>手机号:</span>
          <input type="text" disabled v-model="phone" @focusout="inputBlur" @focusin="inputFocus">
        </div>
        <div class="modifyQuotaPass-label modifyQuotaPass-label-phone">
          <span>验证码:</span>
          <input type="text" v-model.trim="form.code" @focusout="inputBlur" @focusin="inputFocus">
<!--          <span class="modifyQuotaPass-label-phone-code" :class="[minutes ? 'modifyQuotaPass-label-phone-code-checked' : '']" @click="getVerifyCode" ref="codeBtn">获取验证码</span>-->
          <span class="modifyQuotaPass-label-phone-code" @click="getVerifyCode" ref="codeBtn">获取验证码</span>
        </div>
        <div class="modifyQuotaPass-label">
          <span>新密码:</span>
          <input type="password" placeholder="请输入新密码" v-model.trim="form.pass_new" @focusout="inputBlur" @focusin="inputFocus">
        </div>
        <div class="modifyQuotaPass-label">
          <span>确认密码:</span>
          <input type="password" placeholder="请确认密码" v-model.trim="form.pass_entry" @focusout="inputBlur" @focusin="inputFocus">
        </div>
      </template>

      <!--修改密码框-->
      <template v-if="dialogVisibleQuotaPassPay">
        <div class="modifyQuotaPass-label">
          <span>支付密码:</span>
          <input type="password" placeholder="请输入支付密码" v-model.trim="form.quotaPass" @focusout="inputBlur" @focusin="inputFocus">
        </div>
      </template>

      <div class="modifyQuotaPass-btn">
        <button class="button modifyQuotaPass-btn-cancel" @click="onCancel">取消</button>
        <button class="button" @click="onConfirm">确定</button>
      </div>
    </confirm>
  </div>
</template>

<script>
  import Mall from '../../dll/mall'
  import { md5 } from 'vux'

  import getCode from '../../mixin/getCode'

  export default {
    name: 'modifyQuotaPass',
    mixins: [getCode],
    props: {
      value: {
        default: false
      },
      isQuotaPass: {
        type: Number
      },
      dialogVisibleQuotaPassPay: {
        type: Boolean,
        default: false
      },
      setQuotaPass: {},
      createOrder: {},
      phone: {}
    },
    data () {
      return {
        show: false,

        quotaReg: /^\d{6}$/, // 额度密码正则

        form: {
          // pass_source: '',
          code: '',
          pass_new: '',
          pass_entry: '',
          quotaPass: '',
          msg: ''
        },

        find_type: 1,
        verify_account: ''
      }
    },

    watch: {
      value (val, old) {
        if (val !== old) {
          this.show = val
        }
      }
    },

    created () {
      this.show = this.value
      this.verify_account = this.phone
    },

    methods: {
      onCancel () {
        this.inputBlur()
        this.$emit('input', false)
      },

      async onConfirm () {
        this.inputBlur()
        this.$emit('input', true)
        if (this.dialogVisibleQuotaPassPay) { // 输入密码
          if (!this.form.quotaPass) {
            this.$vux.toast.text('请输入密码')
            return
          }
          this.$emit('input', false)
          this.createOrder(null, md5(this.form.quotaPass))
          return
        }

        if (this.isQuotaPass === 0) {
          this.msg = '设置成功'
        }

        if (this.isQuotaPass === 1) {
          this.msg = '修改成功'
        }

        // if (!this.form.pass_source) {
        // this.$vux.toast.text('登录密码不能为空')
        // return
        // }
        if (!this.form.code) {
          this.$vux.toast.text('验证码不能为空')
          return
        }
        if (!(this.quotaReg.test(this.form.pass_new))) {
          this.$vux.toast.text('新密码由6位数字组成')
          return
        }
        if (this.form.pass_entry !== this.form.pass_new) {
          this.$vux.toast.text('两次密码不一致')
          return
        }
        let params = {
          //  pass_source: md5(this.form.pass_source),
          code: this.form.code,
          pass_new: md5(this.form.pass_new),
          pass_entry: md5(this.form.pass_entry)
        }
        let res = await Mall.changeQuotaPass(params)
        if (res.code == 0) {
          this.$vux.toast.text(this.msg)
          this.$emit('input', false)
          this.setQuotaPass()
        } else {
          this.$vux.toast.text(res.msg)
        }
      }

    }
  }
</script>

<style lang="less">
  .modifyQuotaPass {
    .weui-dialog__bd {
      padding-left: 1em;
      padding-right: 1em;
    }

    .weui-dialog__title, .weui-dialog__btn_default, .weui-dialog__btn_primary {
      font-size: 16px;
    }

    .modifyQuotaPass-label {
      margin: 5px 0;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;

      span {
        font-size: 14px;
        color: #333333;
        width: 80px;
      }

      input {
        background: none;
        border: none;
        outline: none;
        border-bottom: 1px solid #d2d2d2;
        padding: 0 5px;
        flex: 1;

        &:focus {
          border-bottom: 1px solid #54b23f;
        }
      }
    }

    .modifyQuotaPass-label-phone {

      span {
        flex-shrink: 0;
      }

      input {
        width: 98px !important;
        flex: auto;
      }

      .modifyQuotaPass-label-phone-code {
        background: #b0290f;
        color: #fff;
        height: 35px;
        line-height: 35px;
        font-size: 13px;
        flex-shrink: 0;
        padding: 0 5px;
        width: auto;
      }

      .modifyQuotaPass-label-phone-code-checked {
        background: #d2d0d0;
      }
    }

    .modifyQuotaPass-btn {
      display: flex;
      justify-content: center;
      .modifyQuotaPass-btn-cancel {
        background: #d2d0d0;
      }
      button {
        width: 80px;
        margin: 10px;
      }
    }
  }

</style>
